<template>
  <div class="master-context">
    <el-row>
      <el-col :lg="12" :sm="24">
        <el-popconfirm title="确定要删除此版本全部数据?">
          <template #reference>
            <el-button type="danger">
              删除版本
            </el-button>
          </template>
        </el-popconfirm>
      </el-col>
    </el-row>

    <json-schema-form
        v-model="vRef"
        :schema="schema"
    >
      <template #default="{ formData, formRefFn }">
        <el-row>
          <el-col :lg="12" :sm="24">
            <el-input v-model="newNodeKey" placeholder="新节点KEY"></el-input>
          </el-col>
          <el-col :lg="12" :sm="24">
            <el-button v-show="newNodeKey" type="primary"
                       @click="addNewNode(formData.value)">
              新增节点
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="24" :sm="24">
            <el-button type="primary" @click="saveData(formData.value)">
              保存数据
            </el-button>
          </el-col>
        </el-row>
        <pre style="background-color: #eee;">{{ JSON.stringify(formData.value, null, 4) }}</pre>
      </template>
    </json-schema-form>
  </div>
</template>

<script lang="ts" setup>
import JsonSchemaForm from '@lljj/vue3-form-element';
import {ref} from "vue";
import {useUserOptionStore} from "@/core/common/StorageUtil";

const newNodeKey = ref<string>('');

const props = defineProps({editData: {type: null, default: null}});
const editData = props.editData;
const userOptionStore = useUserOptionStore();
const categoryData = userOptionStore.businessJsonData;
const vRef = categoryData.master[editData[0]]

const schema = {
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "processKey": {
      "type": "string",
      "title": "当前流程KEY"
    },
    "processVersion": {
      "type": "string",
      "title": "当前流程版本号"
    },
    "processDesc": {
      "type": "string",
      "title": "当前流程版描述"
    },
    "firstNodeKey": {
      "type": "string",
      "title": "流程的第一个节点[支持SPEL]"
    },
    "node": {
      "type": "object",
      "title": "节点KEY",
      "description": "配置节点信息，节点ID：{节点信息}",
      "default": {}
    }
  },
  "required": [
    "firstNodeKey",
    "processVersion",
    "node"
  ]
};

const addNewNode = (val: any) => {
  if(!val.node){
    val.node = {};
  }
  val.node[newNodeKey.value] = {nodeKey: newNodeKey.value};
  newNodeKey.value = '';
}

const saveData = (val: any) => {
  Object.assign(vRef, val);
}
</script>
<script lang="ts">
export default {
  name: "SillyCategoryMasterSchemaForm"
}
</script>

<style scoped>
</style>